<template>
  <a-modal :title="title" :visible="visible" @ok="handleOk" :confirmLoading="confirmLoading" @cancel="handleCancel">
    <a-form-model ref="form" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="上级菜单" prop="parentId">
        <a-tree-select :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }" :treeData="menus" placeholder="Please select" v-model="form.parentId" />
      </a-form-model-item>
      <a-form-model-item label="名称" prop="name">
        <a-input v-model="form.name" />
      </a-form-model-item>
      <a-form-model-item label="标题" prop="title">
        <a-input v-model="form.title" />
      </a-form-model-item>
      <a-form-model-item label="Icon" prop="icon">
        <a-select v-model="form.icon" show-search showArrow>
          <a-select-option v-for="t of iconTypes" :key="t" :value="t">
            <a-icon :type="t" style="font-size: 20px" />
            <span style="font-size: 20px; margin-left: 3px">{{ t }}</span>
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="菜单隐藏" prop="hideInMenu">
        <a-radio-group v-model="form.hideInMenu" buttonStyle="solid">
          <a-radio-button :value="1">是</a-radio-button>
          <a-radio-button :value="0">否</a-radio-button>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="前端路由" prop="path">
        <a-input v-model="form.path" />
      </a-form-model-item>
      <a-form-model-item label="组件" prop="component">
        <a-mentions v-model="form.component">
          <a-mentions-option value="/views/yourView">/views/yourView</a-mentions-option>
          <a-mentions-option value="/layouts/PageView">/layouts/PageView</a-mentions-option>
          <a-mentions-option value="/layouts/RouteView">/layouts/RouteView</a-mentions-option>
        </a-mentions>
      </a-form-model-item>
      <!--  <a-form-model-item label="URL" prop="url">
        <a-input v-model="form.url" />
      </a-form-model-item>-->
      <a-form-model-item label="排序" prop="seq">
        <a-input-number v-model="form.seq" />
      </a-form-model-item>
      <a-form-model-item label="备注" prop="remark">
        <a-input v-model="form.remark" type="textarea" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
import { getParentSelect, saveCascade } from '@/api/module'
import iconTypes from './iconTypes'

export default {
  props: {
    isAdd: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      iconTypes: iconTypes,
      visible: false,
      confirmLoading: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      menus: [],
      form: {
        id: undefined,
        parentId: undefined,
        name: '',
        title: '',
        icon: '',
        hideInMenu: 0,
        path: '',
        component: '',
        seq: undefined,
        remark: '',
        permId: undefined,
        url: ''
      },
      rules: {
        name: [
          { required: true, message: 'Please input name', trigger: 'blur' },
          { min: 2, max: 32, message: 'Length should be 3 to 5', trigger: 'blur' }
        ],
        title: [{ required: true, message: 'Please input title', trigger: 'blur' }],
        icon: [{ required: true, message: 'Please input icon', trigger: 'blur' }],
        hideInMenu: [{ required: true }],
        path: [{ required: true, message: 'Please input path', trigger: 'blur' }],
        component: [{ required: true, message: 'Please input component', trigger: 'blur' }]
      }
    }
  },
  computed: {
    title: function () {
      return this.isAdd ? '新建' : '修改'
    }
  },
  methods: {
    handleCancel(e) {
      this.resetForm()
    },
    handleOk() {
      this.$refs['form'].validate(this.validate)
    },
    async validate(valid) {
      if (valid) {
        this.confirmLoading = true
        this.saveCascade()
      }
    },
    async saveCascade() {
      try {
        const res = await saveCascade(this.form)
        if (this.isAdd) {
          this.$message.success({ content: '添加成功!', duration: 2 })
        } else {
          this.$message.success({ content: '修改成功!', duration: 2 })
        }
        this.resetForm()
        this.$emit('refreshTable')
      } catch (err) {
        this.confirmLoading = false
        console.error(err.message)
      }
    },
    resetForm() {
      this.visible = false
      this.confirmLoading = false
      this.$refs['form'].resetFields()
      this.form = {
        id: undefined,
        parentId: undefined,
        name: '',
        title: '',
        icon: '',
        hideInMenu: 0,
        path: '',
        component: '',
        seq: undefined,
        remark: '',
        permId: undefined,
        url: ''
      }
    },
    async getMenuTree(selfId) {
      let res = await getParentSelect({ selfId })
      this.menus = res.data
    }
  }
}
</script>

<style lang="less" scoped></style>
